<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>复制排班</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<meta name="apple-mobile-web-app-status-bar-style" content="black">
	<meta name="apple-mobile-web-app-capable" content="yes">
	<meta name="format-detection" content="telephone=no">
	<link href="/node_modules/LobsterUIFrame/layuiadmin/layui/css/layui.css" rel="stylesheet" />
	<link href="/node_modules/LobsterUIFrame/layuiadmin/style/admin.css" rel="stylesheet" />
	<link href="/node_modules/LobsterUIFrame/layuiadmin/layui/css/modules/layui-icon-extend/iconfont.css"
		rel="stylesheet" />
	<script src="/node_modules/LobsterUIFrame/layuiadmin/layui/layui.js"></script>
	<style>
		.layui-input,
		.layui-select {
			height: 34px;
		}

		.layui-form-item {
			margin-bottom: 10px;
		}

		.layui-form-label {
			color: #000;
			width: 126px;
			padding: 7px 15px;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}

		.layui-input-block {
			margin-left: 156px;
		}

		.docs .layui-tab-title {
			border-bottom: none;
			flex-wrap: wrap;
			display: flex;
			height: auto;
		}

		.input-line {
			display: flex;
			vertical-align: middle;
			align-items: center;
			justify-content: center;
		}

		.layui-form-select {
			width: 100%;
		}
	</style>
</head>

<body>

	<div class="layui-fluid">
		<form class="layui-form" lay-filter="formCopySched" id="formCopySched">
			<div class="layui-card">
				<div class="layui-card-body">
					<div class="layui-row">
						<div class="layui-col-xs12">
							<div class="layui-form-item">
								<label class="layui-form-label"><i style="color:red;">*&ensp; </i>选择课程</label>
								<div class="layui-input-block">
									<div class="input-line">
										<select name="CourseSelect" id="LAY-schedule-form-Course"
											lay-filter="LAY-schedule-form-Course" lay-search></select>
										<input type="hidden" lay-verify="Courses" id="Courses" name="Courses" />
										<div class="layui-btn layui-btn-sm" id="addCourse"><i class="layui-icon"></i>
										</div>
									</div>
									<div class="docs">
										<ul class="layui-tab-title" id="ul_Courses"></ul>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="layui-row">
						<div class="layui-col-xs12">
							<div class="layui-form-item">
								<label class="layui-form-label"><i style="color:red;">*&ensp; </i>选择医生</label>
								<div class="layui-input-block">
									<div class="input-line">
										<select name="DocSelect" id="LAY-schedule-form-doc"
											lay-filter="LAY-schedule-form-doc" lay-search></select>
										<input type="hidden" lay-verify="docs" id="docs" name="docs" />
										<div class="layui-btn layui-btn-sm" id="addDoc"><i class="layui-icon"></i>
										</div>
									</div>
									<div class="docs">
										<ul class="layui-tab-title" id="ul_doc"></ul>
									</div>
								</div>
							</div>
						</div>
					</div>
					<div class="layui-row">
						<div class="layui-col-xs6">
							<div class="layui-form-item">
								<label class="layui-form-label"><i style="color:red;">*&ensp; </i>复制开始时间</label>
								<div class="layui-input-block">
									<input type="text" required lay-verify="checkoldstart" class="layui-input"
										id="dateOldStart" name="dateOldStart" />
								</div>
							</div>
						</div>
						<div class="layui-col-xs6">
							<div class="layui-form-item">
								<label class="layui-form-label"><i style="color:red;">*&ensp; </i>复制结束时间</label>
								<div class="layui-input-block">
									<input type="text" required lay-verify="checknewstart" class="layui-input"
										id="dateOldEnd" name="dateOldEnd" disabled />
								</div>
							</div>
						</div>
					</div>
					<div class="layui-row">
						<div class="layui-col-xs6">
							<div class="layui-form-item">
								<label class="layui-form-label"><i style="color:red;">*&ensp; </i>新排班结束时间</label>
								<div class="layui-input-block">
									<input type="text" required lay-verify="required" class="layui-input"
										id="dateNewEnd" name="dateNewEnd" />


								</div>
							</div>
						</div>
						<div class="layui-col-xs6">
							<div class="layui-form-item">
								<label class="layui-form-label">快速选择</label>
								<div class="layui-input-block">
									<select lay-filter="mon">
										<option value="-1" selected="selected">请选择</option>
										<option value="1">一个月</option>
										<option value="3">一季度</option>
										<option value="6">半年</option>
									</select>


								</div>
							</div>
						</div>
					</div>
					<div class="layui-form-item layui-hide">
						<input type="button" lay-submit lay-filter="btnSubmit" id="btnSubmit" value="确认">
					</div>
				</div>
			</div>
		</form>
	</div>

</body>

</html>

<script>
	layui.config({
		base: '/node_modules/LobsterUIFrame/layuiadmin/' //静态资源所在路径
	}).extend({
		index: 'lib/index' //主入口模块
	});

	layui.define(['index', 'layer', 'form', 'element', 'table', 'tree', 'laydate'], function () {
		var layer = layui.layer;
		var form = layui.form;
		var element = layui.element;
		var table = layui.table;
		var $ = layui.$;
		var admin = layui.admin;
		var setter = layui.setter;
		var tree = layui.tree;
		var laydate = layui.laydate


		var controller = {
			data: {
				layerindex: 0,
				model: {},
				doclist: [],//选中医生值
				courselist: [],
				fun:null
			},
			//初始化页面
			initpage: function () {
				var self = this

				this.initevent(function () {
					self.initselect()
					self.verifyData()
					//self.datatableLoad();
				});

			},
			getbaseurl: function (fun) {
				var url = "/lowcode/APP20210908194005415/live/?view=layui&fun=" + fun;
				return url;
			},
			initselect: function () {
				var self = this;
				admin.req({
					type: 'get',
					url: self.getbaseurl("LiveCourse.getlivecourse"),
					done: function (obj) {
						$.each(obj.data, function (index, item) {
							$("#LAY-schedule-form-Course").append(new Option(item.CourseName, item.CourseId))
						})
						layui.form.render("select")
					}
				});
				admin.req({
					type: 'get',
					url: self.data.baseinfo.apiGateway + "/self-patient/v1/Doctor/GetDocListAndStatus",
					data: {
						workId: self.data.baseinfo.WorkId,
						deptId: 0,
						mpUserId: '',
						searchkey: '',
						changjing: 1,
						page: 1,
						limit: 999
					},
					done: function (obj) {
						console.log(obj)
						$.each(obj.data.doctorList, function (index, item) {
							$("#LAY-schedule-form-doc").append(new Option(item.DocName, item.EmpId))
						})
						layui.form.render("select")
					}
				});
			},
			//打开弹层
			openlayer: function (title, elem, successfunction, yesfunction, width, height) {
				var self = this;
				layer.open({
					type: 2
					, title: title
					, content: elem
					, maxmin: true
					, area: [width, height]  //宽，高
					, btn: ['保存', '取消']
					, success: function (layero, index) {
						if (successfunction) {
							successfunction();
						}
					}
					, btn2: function (index, layero) {
						$("#LAY-app-form-reset").trigger('click');
					}
					, cancel: function () {
						$("#LAY-app-form-reset").trigger('click');
					}
					, yes: function (index, layero) {
						self.data.layerindex = index;
						var field = getResult()
						console.log(field)
						if (field != null) {
							layer.msg('正在处理，请稍候', { icon: 16, time: 0, shade: [0.3, '#393D49'] });
							if (yesfunction) {
								yesfunction(field);
							}
						}
					}
				});
			},
			//关闭弹层
			closelayer: function () {
				layer.close(this.data.layerindex);
			},
			//初始化事件
			initevent: function (func) {
				var self = this;
				var url = this.getbaseurl("LiveCourse.getbaseinfo");
				admin.req({
					url: url,  //控制器名称，方法名称
					data: {},
					done: function (res) {
						self.data.baseinfo = res.data;
						if (func) {
							func();
						}
					}
				});
				laydate.render({
					elem: "#dateOldStart",
					trigger: 'click',
					done: function (value, date, endDate) {
						$("#dateOldStart").val(value);
						if (value != null) {
							var ndate = new Date(value);
							var end = self.schedenddate(ndate, 0)
							$("#dateOldStart").val(self.schedstartdate(ndate, 0));
							$("#dateOldEnd").val(end);
							laydate.render({
								elem: '#dateNewEnd'
								, min: self.addDate(end, 1)
							});
						}
					}
				});
				parent.getResult = function (fun) {
					if(self.data.doclist.length==0&&self.data.courselist.length==0){
						layer.msg('请选择课程或医生')
						return
					}
					self.data.fun=fun;
					$("#btnSubmit").click();
				}
				form.on('submit(btnSubmit)',function(data){
					console.log(data.field)
					data.field.docs = self.data.doclist
					data.field.Courses = self.data.courselist
					self.data.fun(data.field);
				});
				form.on('select(mon)', function (data) {
					console.log(data, data.value)
					console.log($("#dateOldEnd").val())
					var mon = data.value
					var dateOleEnd = $("#dateOldEnd").val()
					if (dateOleEnd != '') {
						$("#dateNewEnd").val(self.addDate(dateOleEnd,30*mon))
					}
				});


				//添加选中医生
				$(document).on("click", "#addDoc", function () {
					//选中医生信息
					var ids = $("#LAY-schedule-form-doc").val().trim();
					var docsname = $("#LAY-schedule-form-doc").find("option:selected").text();
					var lengli = $("#ul_doc li").length;
					//验证是否选中医生
					if (ids == -1 || ids.length < 1) {
						layer.msg("请添加排班医生！");
						return;
					}
					//验证是否重复选择医生
					if (self.data.doclist.length > 0) {
						var flag = true
						self.data.doclist.forEach((item, index) => {
							if (item.id == ids) {
								flag = false
								layer.msg("排班医生已选择！");
								return;
							}
						})
						if (flag == false) {
							return
						}
					}
					//绑定排班医生值
					var list = { id: ids, name: docsname };
					self.data.doclist.push(list);
					//页面效果实现
					var html = '<li class=""><span>' + docsname + '</span><i data-type="doc" data-id=' + ids + ' class="layui-icon  layui-tab-close">ဆ</i></li>';
					$("#ul_doc").append(html);
					$("#docs").val(JSON.stringify(self.data.doclist));
					form.render();
				});
				$(document).on("click", "#addCourse", function () {
					//选中医生信息
					var ids = $("#LAY-schedule-form-Course").val().trim();
					var docsname = $("#LAY-schedule-form-Course").find("option:selected").text();
					var lengli = $("#ul_Course li").length;
					//验证是否选中医生
					if (ids == -1 || ids.length < 1) {
						layer.msg("请添加课程！");
						return;
					}
					//验证是否重复选择医生
					if (self.data.courselist.length > 0) {
						var flag = true
						self.data.courselist.forEach((item, index) => {
							if (item.id == ids) {
								flag = false
								layer.msg("课程已选择！");
								return;
							}
						})
						if (flag == false) {
							return
						}
					}
					//绑定排班医生值
					var list = { id: ids, name: docsname };
					self.data.courselist.push(list);
					//页面效果实现
					var html = '<li class=""><span>' + docsname + '</span><i data-type="course" data-id=' + ids + ' class="layui-icon  layui-tab-close">ဆ</i></li>';
					$("#ul_Courses").append(html);
					$("#Courses").val(JSON.stringify(self.data.courselist));
					form.render();
				});
				//删除选中医生
				$(document).on('click', '.layui-tab-close', function () {
					var ids = $(this).data("id")
					var type = $(this).data("type")
					$(this).parent().remove();
					if (type == 'doc') {
						//移除删除医生值
						self.data.doclist.forEach((item, index) => {
							if (item.id == ids) {
								self.data.doclist.splice(index, 1);
							}
						})
						console.log(self.data.doclist)
						$("#docs").val(JSON.stringify(self.data.doclist));
					}
					else {
						self.data.courselist.forEach((item, index) => {
							if (item.id == ids) {
								self.data.courselist.splice(index, 1);
							}
						})
						console.log(self.data.courselist)
						$("#courses").val(JSON.stringify(self.data.courselist));
					}
					form.render();
				});
			},

			// 周日日期
			// date: 当前日期
			// week: 当前日期之前第几周
			schedenddate: function (date, week) {
				var time;
				var day = date.getDay();
				if (day == 0)
					time = date.getTime() - 6 * 86400000;
				else
					time = date.getTime() - (day - 1) * 86400000;
				var mdate = new Date(time);
				mdate = new Date(mdate.getTime() - week * 7 * 86400000);
				mdate = new Date(mdate.getTime() + 6 * 86400000);
				var year = mdate.getFullYear();
				var month = mdate.getMonth() + 1;
				if (month < 10)
					month = "0" + month;
				var ddate = mdate.getDate();
				if (ddate < 10)
					ddate = "0" + ddate;
				return year + "-" + month + "-" + ddate;
			},
			addDate: function (date, days) {
				var d = new Date(date);
				d.setDate(d.getDate() + days);
				var m = d.getMonth() + 1;
				return d.getFullYear() + '-' + m + '-' + d.getDate();
			},
			// 周一日期
			// date: 当前日期
			// week: 当前日期之前第几周
			schedstartdate: function (date, week) {
				var time;
				var day = date.getDay();
				if (day == 0)
					time = date.getTime() - 6 * 86400000;
				else
					time = date.getTime() - (day - 1) * 86400000;
				var mdate = new Date(time);
				mdate = new Date(mdate.getTime() - week * 7 * 86400000);
				var year = mdate.getFullYear();
				var month = mdate.getMonth() + 1;
				if (month < 10)
					month = "0" + month;
				var ddate = mdate.getDate();
				if (ddate < 10)
					ddate = "0" + ddate;
				return year + "-" + month + "-" + ddate;
			},

			//自定义验证规则
			verifyData: function () {
				form.verify({
					checkoldstart: function (value) {
						if (value == "")
							return "复制排班开始时间必须填写";
					},
					checknewstart: function (value) {
						if (value == "")
							return "新排班时间必须填写";
					}
				});
			},

		}

		/*
		* 入口
		*/
		controller.initpage();
	});

</script>